<template>
  <div>
    <nut-popup position="bottom" round :custom-style="{ height: '200rpx' }" hei v-model:visible="show">
      <div text-center h-75rpx line-height-75rpx>
        分享至
      </div>
      <div px-32rpx h-125rpx flex flex-a-c>
        <!-- #ifdef H5 -->
        <div flex flex-col flex-a-c h-125rpx @click="h5Copy" class="share-item">
          <div h-60rpx>
            <image w-60rpx h-60rpx src="/static/share/share.png" />
          </div>
          <div text-24rpx mt-10rpx>复制链接</div>
        </div>
        <!-- #endif -->
        <!-- #ifdef MP-WEIXIN -->
        <button class="share-btn share-item" flex flex-col flex-a-c open-type="share" @click="wechatShare('WXSceneSession')" h-125rpx >
          <image w-60rpx h-60rpx src="/static/share/wechat.png" />
          <div text-24rpx mt-10rpx>微信好友</div>
        </button>
        <!-- #endif -->
        <!-- #ifdef APP-PLUS -->
        <div flex flex-col flex-a-c h-125rpx @click="wechatShare('WXSceneTimeline')" class="share-item">
          <image w-60rpx h-60rpx src="/static/share/friends.png" />
          <div text-24rpx mt-10rpx>朋友圈</div>
        </div>
        <!-- #endif -->
      </div>
      <copy v-show="false" ref="copyRef"  />
    </nut-popup>
  </div>
</template>

<script setup lang="ts">
import configs from '@/config/config'

const show = ref<boolean>(false)
const copyRef = ref<any>(null)
interface MessageRule {
  title: string, //分享内容的标题
  href:string, //跳转的链接地址
  imageUrl:string, // 图片地址
  type:string,
}
const shareData = ref<MessageRule>({
  title: '', //分享内容的标题
  href: '', //跳转的链接地址
  imageUrl: '', // 图片地址
  type:'goods'
})
function wechatShare(type:'WXSceneSession' | 'WXSceneTimeline' | 'WXSceneFavorite') {
  // #ifdef APP-PLUS
  appShare(type)
  // #endif

  // #ifdef MP-WEIXIN
  console.log('weixin')
  // #endif
}


function fill(message: MessageRule) {
  shareData.value = message
  console.log('shareData.value',shareData.value)
}

function shareTitle() {
  let shareTitle;
  if (shareData.value.type == "goods") {
    shareTitle = `[好友推荐]${shareData.value.title}快来跟我一起看看吧`;
  } else if (shareData.value.type == "shops") {
    shareTitle = `[好友发现]${shareData.value.title}快来跟我一起看看吧`;
  } else if (shareData.value.type == "pintuan") {
    shareTitle = `[好友邀请]${shareData.value.title}快来跟我一起抢购吧!`;
  } else if (shareData.value.type == "kanjia") {
    shareTitle = `[好友邀请]请快来帮我砍一刀${shareData.value.title}`;
  }
  console.log('shareTitle',shareTitle)
  return shareTitle;
}

function h5Copy(){
  copyRef.value.setCopy(configs.shareLink + shareData.value.href)
}

function appShare(type :'WXSceneSession' | 'WXSceneTimeline' | 'WXSceneFavorite') {
  // 微信好友
  uni.share({
    provider: "weixin",
    scene: type,
    href: configs.shareLink + shareData.value.href,
    imageUrl: shareData.value.imageUrl,
    type: 0,
    summary: shareData.value.title,
    title: shareTitle(),
  })
}

function open(){
  show.value = true
}

defineExpose({
  fill,
  open,
  shareTitle
})
</script>

<style scoped lang="scss">
.share-item {
  width: 25%
}
.share-btn{
  background: none;
  margin: 0 10rpx;
}
button::after {
  border: none;
}
</style>
